<script setup lang="ts">
defineProps({
  name: {
    type: String,
    default: '',
  },
  sort: {
    type: Number,
    default: 1,
  },
  isMovable: {
    type: Boolean,
    default: true,
  },
})
const emits = defineEmits(['sort'])
function handleOpenSort() {
  emits('sort')
}
</script>

<template>
  <view class="box-border h-[110px] w-full flex items-center rounded-lg bg-white px-4">
    <view class="flex flex-1 items-center">
      <wd-text :text="sort" size="14px" color="text-main" @click="handleOpenSort">
        <template #suffix>
          <wd-icon name="arrow-down" size="12px" class="ml-1" />
        </template>
      </wd-text>
      <view class="ml-4 flex items-center">
        <wd-img
          :radius="5"
          :width="60"
          :height="38"
          src="https://p0.meituan.net/rmscashier/067eae72da86718144ffa7a0eeae272c57985.jpg"
        />
        <view class="ml-4">
          <wd-text :text="name" size="14px" color="#333" />
          <view class="mt-1 flex">
            <wd-tag type="warning" plain custom-class="mr-1">多规格</wd-tag>
            <wd-tag type="warning" plain custom-class="mr-1">多做法</wd-tag>
          </view>
          <view class="mt-1">
            <text class="text-sm color-price">¥12</text>
            <text class="text-xs text-main">/份</text>
          </view>
        </view>
      </view>
    </view>
    <view v-if="isMovable" class="i-icon-park-outline-align-text-both" />
  </view>
</template>

<style scoped lang="scss"></style>
